<template>
  <div style="padding: 20px">
    <el-card>
      <div slot="header">参会企业</div>
      <div>
        <el-row :gutter="10" style="margin-top: 20px">
          <el-col :span="3">
            <el-select v-model="model" placeholder="不限参会状态">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="model" placeholder="不限套餐类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="model" placeholder="不限来源">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="model" placeholder="不限置顶">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select v-model="model" placeholder="按参会状态排序">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-row :gutter="10" type="flex">
              <el-select
                v-model="model"
                placeholder="公司名"
                style="width: 40%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-row :gutter="10" type="flex">
                <el-input placeholder=""></el-input>
                <el-button type="primary">
                  <i class="el-icon-search"></i>
                </el-button>
              </el-row>
            </el-row>
          </el-col>
        </el-row>
        <el-table
          :data="list"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="companyname" label="企业名称" width="250">
            <template slot-scope="scope">
              <el-link :href="scope.row.link" type="primary">{{
                scope.row.companyname
              }}</el-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="setmeal_cn"
            label="会员套餐"
            width="80"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="add_status"
            label="认证状态"
            width="80"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="prop"
            label="数据来源"
            width="80"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.source ? "后台添加" : "自主申请" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="audit"
            label="参会状态"
            width="80"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.audit ? 'success' : 'warning'">{{
                scope.row.audit ? "已通过" : "待审核"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="prop"
            label="联系方式"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.mobile }}{{ scope.row.contact }}
            </template>
          </el-table-column>
          <el-table-column
            prop="addtime"
            label="添加日期"
            width="130"
            align="center"
          >
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              {{ scope.row.addtime }}
            </template>
          </el-table-column>
          <el-table-column
            prop="prop"
            label="微信直面"
            width="100"
            align="center"
          >
            客服
          </el-table-column>
          <el-table-column
            prop="prop"
            label="操作"
            width="width"
            align="center"
          >
            <template>
              <el-button type="primary" size="small" @click="editDialog = true"
                >修改</el-button
              >
              <el-button type="primary" size="small" @click="faceDialog = true"
                >直面</el-button
              >
              <el-button type="primary" size="small" @click="topupDialog = true"
                >置顶</el-button
              >
              <el-button type="danger" size="small" @click="delBtn"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row :gutter="10" style="margin-top: 20px">
          <el-col :span="12">
            <el-button type="primary" size="small" @click="addenterprise">添加企业</el-button>
            <el-button
              type="primary"
              size="small"
              @click="chStatusDialog = true"
              >参会状态</el-button
            >
            <el-button type="primary" size="small"
              >微信直面设置为客服</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="addBatchDialog = true"
              >批量添加</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="batchTopDialog = true"
              >批量置顶</el-button
            >
            <el-button type="primary" size="small" @click="batchDel"
              >批量删除</el-button
            >
          </el-col>
          <el-col :span="12">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="255"
              style="text-align: right"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 修改 -->
    <el-dialog title="设置参会状态" :visible.sync="editDialog" width="25%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="参会状态">
          <el-radio-group v-model="model">
            <el-radio :label="label">待审核</el-radio>
            <el-radio :label="label">已通过</el-radio>
            <el-radio :label="label">未通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="10" type="flex" justify="end">
          <el-button @click="editDialog = false">取消</el-button>
          <el-button type="primary">确定</el-button>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 直面 -->
    <el-dialog
      title="设置微信直面二维码"
      :visible.sync="faceDialog"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="参会企业"
          >宁波慧帮惠选智能科技有限公司</el-form-item
        >
        <el-form-item label="二维码方式">
          <el-radio v-model="radio" label="label">自主上传</el-radio>
          <el-radio v-model="radio" label="label">当场客服</el-radio>
        </el-form-item>
        <el-form-item label="">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注">
          <el-input placeholder="" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-row
            :gutter="10"
            type="flex"
            justify="end"
            style="margin-top: 20px"
          >
            <el-button @click="faceDialog = false">取消</el-button>
            <el-button type="primary">确认</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 置顶 -->
    <el-dialog title="设置参会企业置顶" :visible.sync="topupDialog" width="25%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="认证状态">
          <el-radio v-model="radio" label="label">置顶</el-radio>
          <el-radio v-model="radio" label="label">取消置顶</el-radio>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="topupDialog = false">取 消</el-button>
        <el-button type="primary">确定</el-button>
      </template>
    </el-dialog>
    <!-- 批量置顶 -->
    <el-dialog
      title="设置参会企业置顶"
      :visible.sync="batchTopDialog"
      width="25%"
    >
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="认证状态">
            <el-radio v-model="radio" label="label">置顶</el-radio>
            <el-radio v-model="radio" label="label">取消置顶</el-radio>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="batchTopDialog = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 批量添加 -->
    <el-dialog title="批量添加企业" :visible.sync="addBatchDialog" width="25%">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="刷新时间">
            <el-select v-model="model" placeholder="不限">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业认证">
            <el-select v-model="model" placeholder="不限">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="套餐类型">
            <el-select v-model="model" placeholder="不限">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="addBatchDialog = false">取 消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </el-dialog>
    <!-- 参会状态 -->
    <el-dialog title="设置参会状态" :visible.sync="chStatusDialog" width="25%">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-radio-group v-model="model">
            <el-radio :label="label">待审核</el-radio>
            <el-radio :label="label">已通过</el-radio>
            <el-radio :label="label">未通过</el-radio>
          </el-radio-group>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="chStatusDialog = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editDialog: false,
      faceDialog: false,
      topupDialog: false,
      batchTopDialog: false,
      addBatchDialog: false,
      chStatusDialog: false,
    };
  },
  methods: {
    // 删除
    delBtn() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    batchDel() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加企业
    addenterprise() {
      this.$router.push({
        name:"addenterprise"
      })
    }
  },
};
</script>

<style scoped></style>
